<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
    <title>甘洛县精准扶贫大数据管理平台</title>
    <link rel="stylesheet" type="text/css" href="/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/my-page/my-page.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/basic.js"></script>
    <script type="text/javascript" src="/static/js/probox.js"></script>
    <style>
        #poor .list a li {
            width: 45%;
            line-height: 24px;
            font-size: 14px;
        }
        .searButt{
            height: 40px;
            width: 60px;
            margin-left:20px;
        }
        .searInput{
            width:250px;
            height: 40px;
            margin-left: 10px;
            font-size: 16px;
            padding-left: 5px;
        }
    </style>
    <script>
        function fullScreen() {
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            }
            ;
            return;
        }
    </script>
</head>

<body>
<header>
    <div class="main"><h4>甘洛县精准扶贫大数据管理平台</h4></div>
    <div><a href="/ganluo"><i class="fa fa-home"></i> 首页</a></div>
    <div><a href="javascript:fullScreen();"><i class="fa fa-desktop"></i> 全屏</a></div>
    <!--<div class="search"><input type="text" placeholder=""><button>搜索</button></div>-->
</header>
<div id="main-table">
    <div id="region" class="tableCell">
        <label><i class="fa fa-database" aria-hidden="true"></i> 精准扶贫大数据</label>
        <ul>
            @for(c in country){
                <li><a href="/ganluo/village?id=${c.id}">${c.name}</a></li>
            @}
        </ul>
    </div>
    <div id="poor" class="tableCell mainCell">
        <!--<div class="search">-->
            <!--<input type="text" class="searInput" id="searInput" placeholder="按姓名搜索">-->
            <!--<button class="searButt" onclick="search()">搜索</button>-->
        <!--</div>-->
        <div class="list">
            @for(us in users){
            <a href="javascript:showdetail(${us.family!})">
                <div class="photo" style="background-image:url(${us.family_photo!})"></div>
                <div class="name">${us.name!}</div>
                <div>${us.xian!} > ${us.country!} > ${us.village!} > ${us.group!}</div>
                <ul>
                    <li>
                       ${us.poor_reason!}
                    </li><!--<li>
                        贫困户属性：低保贫困户                    </li>-->
                    <li>
                        家庭成员数量：${family_mans!}
                    </li>
                    <li>
                        人均年收入： ￥${us.per_income!}
                    </li>
                    <li>
                        联系方式：${us.tel!}
                    </li>
                </ul>
            </a>
            @}
        </div>
        <div style="text-align: center;margin-top: 10px;">
            <div class="my-page"></div>
        </div>


        <script src="/static/my-page/my-page.js"></script>
        <script>
            $(function () {
                $("a[href='/ganluo/village?id=${id!}']").parent().attr("class","on")
                $("a[href='/ganluo/village?id=${pid!}']").parent().attr("class","on")
                $("a[href='/ganluo/village?type=village&id=${id!}']").parent().attr("class","on")
            })

            myPageInit({
                pages: Number(${all_page!22}),
                currentPage: Number(${page!2}),
                element: '.my-page',
                callback: function (page) {
                    console.log("当前页:"+ page);
                    if(page == ${page!}){
                        console.log("hello")
                    }else {
                        window.location.href = "/ganluo/village?id=${id}&name=${name!}&type=${type!}&page="+page;

                    }
                }
            });
        </script>
        <!--<ul class="pagination">-->
            <!--<li class="disabled"><span>&laquo;</span></li>-->
            <!--<li class="active"><span>1</span></li>-->
            <!--<li><a href="javascript:;">2</a></li>-->
            <!--<li><a href="javascript:;">3</a></li>-->
            <!--<li><a href="javascript:;">4</a></li>-->
            <!--<li><a href="javascript:;">5</a></li>-->
            <!--<li><a href="javascript:;">6</a></li>-->
            <!--<li><a href="javascript:;">7</a></li>-->
            <!--<li><a href="javascript:;">&raquo;</a></li>-->
        <!--</ul>-->
    </div>
    <div id="topic" class="tableCell">
        <ul id="village-stats">
            @for(c in cuns){
            <li>
                <a href="/ganluo/village?type=village&id=${c.id!}">
                    <label><i class="fa fa-tree" aria-hidden="true"></i> ${c.name!}</label>
                    <p>贫困户：${c.family!}</p>
                    <p>贫困人口：${c.family_mans!}</p>
                    <!--<p>贫困户：51</p><p>贫困人口：163</p>-->
                </a>
            </li>
            @}
            <!--<li class="on">-->
                <!--<a href="">-->
                    <!--<label><i class="fa fa-tree" aria-hidden="true"></i> 两河村</label>-->
                    <!--<p>贫困户：65</p>-->
                    <!--<p>贫困人口：223</p>-->
                    <!--&lt;!&ndash;<p>贫困户：65</p><p>贫困人口：223</p>&ndash;&gt;-->
                <!--</a>-->
            <!--</li>-->

        </ul>
    </div>
</div>
</body>
<script>
    function showdetail(id) {
        $('#poor').proBox({
            'id': 'detail',
            'type': 3,
            'fixed': 0,
            'mask': {'show': 0},
            'html': '<div class="title"><label>贫困户详细信息</label><i class="close">x</i></div><iframe frameborder="0" width="100%" height="100%" src="/ganluo/detail?id=' + id + '" marginwidth="0" marginheight="0"></iframe>',
            'close': '.close'
        });
    }
</script>
</html>